<template>
  <div class="layout">
    <Layout>
      <!-- Header  -->
      <Header class="layout-header" id="header">
        <MainMenu></MainMenu>
      </Header>
      <!-- Header -->
      <!-- Content -->
      <Content :style="{height:contentHeight}" class="content-warp" id="content">
        <router-view></router-view>
      </Content>
      <!-- Content -->
      <!-- <Footer class="layout-footer-center" id="footer">2019-2020 &copy; 佛山市天地行科技有限公司</Footer> -->
    </Layout>
  </div>
</template>

<script>
import MainMenu from "@/components/menu/MainMenu.vue";
export default {
  components: {
    MainMenu,
  },
  name: "Index",
  data() {
    return {
      contentHeight: "1016px",
    };
  },
  methods: {
    getHight() {
      var clientHeight = 0;
      var menuHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      } else {
        clientHeight =
          document.body.clientHeight > document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      }
      menuHeight = document.getElementById("header").offsetHeight;
      // 窗口高度

      this.contentHeight = clientHeight - menuHeight + "px";
    },
    getHightResize() {
      var menuHeight = 0;
      menuHeight = document.getElementById("header").offsetHeight;
      // 窗口高度
      this.contentHeight =
        document.documentElement.clientHeight - menuHeight + "px";
    },
  },
  mounted() {
    this.getHight();
    window.onresize = () => {
      this.getHightResize();
    };
  },
  computed: {},
};
</script>

<style scoped>
.layout {
  
  position: relative;
  border-radius: 4px;
  overflow: hidden;

  width: 100%;
}
.layout-logo {
  color: white;
  font-size: 1.5em;
  height: 30px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 0;
  left: 20px;
}
.layout-nav {
  float: right;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
.layout-header {
  line-height: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background-color: #2d8cf0;
}
.logout-box {
  color: white;
  float: right;
}
a:hover,
a:visited,
a:link,
a:active,
a {
  color: white;
  text-decoration: none;
}
.diliver {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  margin: 10px 0;
  clear: both;
  border-top: #d7dde4 1px solid;
}
.content-warp {

}
</style>